<template>
  <el-form :model="student" :rules="rules" ref="studentForm" label-width="120px">
    <el-form-item label="学号" prop="id">
      <el-input v-model="student.id" :disabled="props.type!=='add'"></el-input>
    </el-form-item>
    <el-form-item label="姓名" prop="name">
      <el-input v-model="student.name" :disabled="props.type==='search'"></el-input>
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group v-model="student.gender" :disabled="props.type==='search'">
        <el-radio value="男" size="large">男</el-radio>
        <el-radio value="女" size="large">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="电话" prop="phone">
      <el-input v-model="student.phone" :disabled="props.type==='search'"></el-input>
    </el-form-item>
    <el-form-item label="班级" prop="isList" v-if="props.type!=='edit'">
      <el-cascader v-model="student.idList" :options="options"
                   :props="{label: 'name', value: 'id'}" clearable  style="width: 300px;" :disabled="props.type==='search'"/>
    </el-form-item>
    <el-form-item label="课程" v-if="props.type==='search'">
      <el-select  placeholder="展开" :disabled="false">
        <el-option v-for="item in student.courseList" :key="item.id" :label="item.name" :value="item.id"/>
      </el-select>
    </el-form-item>
    <el-form-item v-if="props.type!== 'search'">
      <el-button @click="emits('visible', false)">取消</el-button>
      <el-button type="primary" @click="submitForm(rules)">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {onMounted, onUpdated, ref} from "vue";
import {idStores} from "@/stores/stores.js";
import request from "@/requests/request.js";
import {ElMessage} from "element-plus";
const emits = defineEmits('visible')
const props = defineProps({
  type: String,
})
const store = idStores()
const options = ref([])
const studentForm = ref(null);
const student = ref({})
onMounted(() => {
  request.get('/college/get-college-tree').then(res => {
    options.value = res.data.data
  })
  if (props.type!=='add') {
    request.get('/student/get-student', {
      params: {
        id: store.id
      }
    }).then(res => {
      student.value = res.data.data
    }).then(res => {
      console.log(res)
    })
  }

})
if(props.type === 'add') {
  student.value = {
    id: '',
    name: '',
    gender: '男',
    phone: '',
    idList: [],
    courseList: []
  }
}
const rules = ref(
    {
      id: [
        {required: true, message: '学号不能为空', trigger: 'blur'},
        {pattern: /^[A-Za-z0-9]+$/, message: '学号只能包含数字和字母', trigger: 'blur'}
      ],
      name: [
        {required: true, message: '姓名不能为空', trigger: 'blur'},
        {pattern: /^[A-Za-z\u4e00-\u9fa5]+$/, message: '姓名只能包含中文或英文字符', trigger: 'blur'}
      ],
      phone: [
        {required: true, message: '电话不能为空', trigger: 'blur'},
        {pattern: /^1[3-9]\d{9}$/, message: '请输入有效的电话号码', trigger: 'blur'}
      ],
      idList: [
        {required: true, message: '班级不能为空', trigger: 'blur'},
      ],
    }
)
const submitForm = (rules) => {
  studentForm.value.validate((valid) => {
    if (valid) {
      if (props.type === 'add') {
        request.post('/register/student', {
          username: student.value.id,
          name: student.value.name,
          sex: student.value.gender,
          phone: student.value.phone,
          password: student.value.id,
          classId: student.value.idList[2]
        }).then(res => {
          emits('visible', false);
          ElMessage({
            message: res.data.message,
            type: 'success',
          })
        });
      } else {
        request.post('/student/update-student', {
          campusId: student.value.id,
          name: student.value.name,
          sex: student.value.gender,
          phone: student.value.phone,
        }).then(res => {
          emits('visible', false);
          ElMessage({
            message: res.data.message,
            type: 'success',
          })
        });
      }
    }
  });
};
</script>
